<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/plugins/build/css/app.css" media="all">
    <link rel="stylesheet" href="/plugins/treeTable/themes/vsStyle/treeTable.min.css" media="all">
</head>
<style>
    #treeTable .layui-table td{
        padding: 5px 15px;
    }
</style>
<body>
<div class="container">
    <div class="custom_btn_search" style="float: right;margin-bottom: 10px;">
        <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="editRootPage('0');return false;">
            <i class="layui-icon">&#xe654;</i>
        </button>
    </div>
    <table class="layui-table" id="treeTable">
        <thead>
            <tr>
                <th>菜单名称</th>
                <th style='width:40px;text-align: center;'>图标</th>
                <th>菜单Url</th>
                <th>菜单权限</th>
                <th>菜单排序</th>
                <th style='width:80px;'>操作</th>
            </tr>
        </thead>
        <tbody id="treeTableBody"></tbody>
    </table>
</div>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/jquery-1.8.3.min.js"></script>
<script src="/plugins/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<script src="/plugins/common.js"></script>
<script>
    //配置项：列表地址、删除地址、编辑页面、详情页面
    var listUrl = SERVER_URL+"/sysMenu/list";
    var delUrl = SERVER_URL+"/sysMenu/del";
    var editUrl = "edit.html";
    var editSubUrl = "editSub.html";
    var iconUrl = "icon.html";

    layui.use(['jquery', 'table', 'form','layer'], function() {
        var $ = layui.jquery;
        layer.config({
            anim: 5
            ,offset: '50px'
            ,maxmin: true
            ,isOutAnim: false
        });

        //行末工具栏
        function initTools(data) {
            var str = "";
            str += "<div class=\"layui-btn-group custom_btn_group\">";
             str += "<button onclick=\"editSubPage('add','"+data.menuId+"','"+data.menuLevel+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe654;</i></button>";
            if(data.menuLevel == "1"){
                str += "<button onclick=\"editRootPage('"+data.menuId+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe642;</i></button>";
            }else{
                str += "<button onclick=\"editSubPage('edit','"+data.menuId+"','"+data.menuLevel+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe642;</i></button>";
            }
            // str += "<button onclick=\"del('"+data.menuId+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe640;</i></button>";
            str += "</div>";
            return str;
        }

        //拼接菜单数据
        function initMenuList(data) {
            var str = "";
            for(var i in data){
                str += "<tr id=\""+data[i].menuId+"\" pid=\""+data[i].menuParentId+"\">";
                str += "<td>"+data[i].menuName+"</td>";

                if(data[i].menuIcon == "" || data[i].menuIcon == null){
                    str += "<td style='width:40px;text-align: center;'></td>";
                }else{
                    str += "<td style='width:40px;text-align: center;'>"+"<i class=\"layui-icon\">"+data[i].menuIcon+"</i>"+"</td>";
                }
                if(data[i].menuUrl == "" || data[i].menuUrl == null){
                    str += "<td></td>";
                }else{
                    str += "<td>"+data[i].menuUrl+"</td>";
                }
                if(data[i].menuPermission == "" || data[i].menuPermission == null){
                    str += "<td></td>";
                }else{
                    str += "<td>"+data[i].menuPermission+"</td>";
                }
                str += "<td>"+data[i].menuSort+"</td>";
                str += "<td style='width:80px;'>"+initTools(data[i])+"</td>";
                str += "</tr>";
            }
            $("#treeTableBody").html("");
            $("#treeTableBody").append(str);
            //渲染树形结构
            $("#treeTable").treeTable({expandLevel : 2}).show();
        }

        //获取菜单列表数据
        $.ajax({
            type: 'GET',
            url: listUrl,
            success: function (result) {
                if(result.code == 20000){
                    initMenuList(result.data);
                }else{
                    layer.msg(result.msg, {time: 1500});
                }
            }
        });
    });

    //编辑菜单图标
    function editIcon(menuId) {
        layer.open({
            area: ['800px', '500px']
            ,type: 2
            ,title: '选择图标'
            ,content: iconUrl+"?menuId="+menuId
        });
    }

    //添加一级菜单
    function editRootPage(menuParentId){
        var url = menuParentId == "0" ? editUrl : editUrl+"?id="+menuParentId;
        layer.open({
            area: ['800px', '500px']
            ,type: 2
            ,title: '添加菜单'
            ,content: url
        });
    }

    //添加子菜单
    function editSubPage(type, menuParentId, menuParentLevel){
        var url = type == "add" ? editSubUrl+"?menuParentId="+menuParentId+"&menuParentLevel="+menuParentLevel : editSubUrl+"?id="+menuParentId
        layer.open({
            area: ['800px', '500px']
            ,type: 2
            ,title: '编辑子菜单'
            ,content: url
        });
    }

    //删除
    function del(menuId) {
        layer.confirm('确定删除该菜单？', {
            btn: ['确定','取消']
        }, function(){
            layer.load(2, {time: 5*1000});
            $.ajax({
                type: 'POST',
                url: delUrl,
                data: {id: menuId},
                success: function (result) {
                    layer.closeAll();
                    if(result.code == 20000){
                        layer.msg('操作成功', {icon: 1,time: 1000}, function(){
                            window.location.reload();
                        })
                    }else{
                        layer.msg(result.msg, {time: 1500});
                    }
                }
            });
        }, function(){
            layer.closeAll();
        });
    }

    //刷新列表
    function reload() {
        layer.closeAll();
        layer.msg('操作成功', {icon: 1,time: 1500}, function(){
            window.location.reload();
        })
    }
</script>
</body>
</html>
